@use './_variables.scss' as *;

// 覆盖一些element-plus样式
// 面包屑
.el-breadcrumb__inner {
  color: var(--breadcrumb-text-color);
  &.is-link,
  a {
    color: var(--breadcrumb-link-text-color);
    &:hover {
      color: var(--breadcrumb-hover-text-color);
    }
  }
}
.el-breadcrumb__separator {
  color: var(--color-333);
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: var(--breadcrumb-text-color);
  &:hover {
    color: var(--breadcrumb-text-color);
  }
}

// el-dropdown下拉菜单样式
.el-dropdown {
  cursor: pointer;
  color: var(--dropdown-text-color);
  // .el-dropdown__caret-button:hover {
  //   border-left: 1px solid var(--dropdown-active-text-color);
  // }
}
.el-dropdown-menu {
  padding: 1px 0;
  a {
    display: block;
  }
  .el-dropdown-menu__item {
    &:focus,
    &:not(.is-disabled):hover {
      background-color: rgba(var(--dropdown-active-bg), 0.1);
      color: var(--dropdown-active-text-color);
    }
  }
}

// el-tabs样式
.no-header-bottom-line {
  .el-tabs__nav-wrap {
    &:after {
      display: none;
    }
  }
}
.el-tabs__nav-wrap {
  .el-tabs__active-bar {
    background-color: var(--tabs-active-text-color);
  }
  .el-tabs__item {
    font-size: 16px;
    color: var(--tabs-text-color);
    &.is-active {
      color: var(--tabs-active-text-color);
    }
  }
}

div.el-tabs__item {
  &:hover {
    color: var(--tabs-active-text-color);
  }
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}
// el-card样式
.el-card {
  margin: 0;
  border: 1px solid var(--card-border-color);
  background-color: var(--card-bg);
  color: var(--card-text-color);
  &.is-always-shadow {
    box-shadow: none;
  }
}
div .el-card__header {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-333);
  border-color: var(--card-header-border-color);
}
div .el-card__body {
  padding: 10px;
  font-size: 14px;
}
div .el-card__footer {
  padding: 10px;
  font-size: 14px;
}
.el-checkbox {
  color: white;
}
.el-tag.edit {
  cursor: pointer;
}
.el-textarea .el-input__count {
  background: transparent;
}

// 全局input样式修改
// .el-date-range-picker__editor,
.el-input:not(.el-pagination__editor, .login-item) {
  .el-input__wrapper {
    background-color: var(--input-bg);
    box-shadow: 0 0 0 1px var(--input-border-color) inset;
    &.is-focus,
    &:hover {
      box-shadow: 0 0 0 1px var(--input-hover-border-color) inset;
    }
  }
  .el-input__inner {
    // height: var(--common-input);
    // line-height: var(--common-input);
    // background-color: var(--input-bg);
    // border-color: var(--input-border-color);
    color: var(--input-text-color);
  }
  &.is-disabled .el-input__inner {
    background-color: var(--input-disabled-bg);
    border-color: var(--input-disabled-border-color);
    color: var(--input-disabled-text-color);
  }
  .el-input__icon {
    line-height: var(--common-input);
    color: var(--input-icon-color);
    &:hover {
      color: var(--input-icon-color);
    }
  }
}
.el-input__inner {
  &:focus,
  &:hover {
    border-color: var(--input-hover-border-color);
  }
}
.el-input-group__prepend {
  background-color: var(--input-border-color);
  border-color: var(--input-border-color);
  color: var(--input-text-color);
}
.el-input-group__append {
  background-color: var(--input-border-color);
  border-color: var(--input-border-color);
  color: var(--input-text-color);
}
// 日期选择器
div.el-date-editor {
  &.el-input__inner {
    height: var(--common-input);
    line-height: var(--common-input);
    background-color: var(--input-bg);
    border-color: var(--input-border-color);
    color: var(--input-text-color);
    &:focus,
    &:hover {
      border-color: var(--input-hover-border-color);
    }
  }
  &.el-input__wrapper {
    box-shadow: 0 0 0 1px var(--input-border-color) inset;
  }
  .el-input__suffix .el-input__icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-input__suffix .el-input__icon.el-input__validateIcon {
    display: none;
  }
}
// 时间日期组件样式
.el-date-range-picker,
.el-date-picker {
  .el-date-table {
    td {
      &.current:not(.disabled) span {
        background-color: var(--primary-theme);
      }
      &.today span {
        color: var(--primary-theme);
      }
      &.available:hover {
        color: var(--primary-theme);
      }
      &.end-date .el-date-table-cell__text,
      &.start-date span {
        background-color: var(--primary-theme);
      }
    }
  }
  .el-time-panel__btn.confirm {
    color: var(--primary-theme);
  }
  .el-date-picker__header-label:hover {
    color: var(--primary-theme);
  }
  .el-picker-panel__icon-btn:hover {
    color: var(--primary-theme);
  }
  .el-picker-panel__shortcut:hover {
    color: var(--primary-theme);
  }
  .el-year-table,
  .el-month-table {
    td.today .el-date-table-cell__text {
      color: var(--primary-theme);
    }
  }
  .el-year-table,
  .el-month-table {
    td.current:not(.disabled) .el-date-table-cell__text {
      background-color: var(--primary-theme);
    }
  }
  .el-year-table,
  .el-month-table {
    td .el-date-table-cell__text:hover {
      color: var(--primary-theme);
    }
  }
}
// 多行文本框
.el-textarea .el-textarea__inner {
  background-color: var(--input-bg);
  border-color: var(--input-border-color);
  color: var(--input-text-color);
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--input-border-color) inset;
  &:focus {
    border-color: var(--input-border-color);
  }
  &:hover {
    box-shadow: 0 0 0 1px var(--input-border-color) inset;
  }
}

// 下拉框
div.el-select {
  .el-input {
    .el-input__icon.el-icon-arrow-up {
      margin-top: 2px;
      &.is-reverse {
        margin-top: -2px;
      }
    }
    &.is-focus .el-input__inner {
      border-color: var(--input-hover-border-color);
    }
  }
  .el-select__wrapper {
    background-color: var(--select-bg);
    box-shadow: 0 0 0 1px var(--select-border-color) inset;
    &.is-focused {
      box-shadow: 0 0 0 1px var(--select-hover-border-color) inset;
    }
    &.is-hovering:not(.is-focused) {
      box-shadow: 0 0 0 1px var(--select-border-color) inset;
    }
    .el-select__placeholder:not(.is-transparent) {
      color: var(--select-text-color);
    }
  }
  .el-select__icon {
    line-height: var(--common-input);
    color: var(--select-icon-color);
    &:hover {
      color: var(--select-icon-color);
    }
  }
}
li.el-select-dropdown__item {
  &.is-selected {
    color: var(--select-active-text-color);
  }
  &:hover {
    background-color: rgba(var(--select-hover-bg), 0.2);
    color: var(--select-hover-text-color);
  }
}

// 级联选择器
div {
  .el-cascader .el-input {
    &.is-focus .el-input__wrapper {
      box-shadow: 0 0 0 1px var(--cascader-hover-border-color) inset;
    }
  }
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
    color: var(--cascader-hover-text-color);
  }
}

// 全局el-button样式修改
.el-button {
  padding: 10px 20px;
}
.el-button--small {
  padding: 9px 15px;
}
.el-button--mini {
  padding: 7px 15px;
}
.el-button {
  // :not(.el-picker-panel__link-btn)
  display: inline-flex;
  border-radius: 5px;
  transition: all 0.2s;
  color: var(--button-default-text-color);
  background-color: var(--button-default-bg);
  border-color: var(--button-default-border-color);
  &:hover {
    color: var(--button-default-hover-text-color);
    border-color: var(--button-default-hover-border-color);
    .svg-icon {
      fill: var(--button-default-hover-text-color);
    }
  }
  &.is-disabled {
    color: var(--button-default-text-color);
    border-color: var(--button-default-border-color);
    opacity: 0.65;
  }
  &.el-button--primary:not(.is-text) {
    color: var(--button-text-color);
    background-color: var(--button-bg);
    border-color: var(--button-border-color);
    &.is-disabled {
      background-color: var(--button-bg);
      border-color: var(--button-border-color);
      color: #eee;
      opacity: 0.65;
    }
    &:hover {
      background-color: var(--button-bg);
      border-color: var(--button-border-color);
      color: #eee;
    }
  }
  &.is-text {
    padding-left: 5px;
    padding-right: 5px;
    color: var(--button-text-text-color);
    &:not(.is-disabled):hover {
      background-color: transparent;
    }
    &.is-disabled {
      color: var(--button-disabled-text-color);
    }
  }
}
.el-button.el-dropdown__caret-button {
  padding-left: 5px;
  padding-right: 5px;
}
.el-button--mini {
  padding: 7px 15px;
}

// MessageBox 弹框
.el-message-box {
  background: var(--message-box-bg);
  border: none;
  .el-message-box__title {
    line-height: 24px;
    font-weight: bold;
    font-size: 18px;
  }
  .el-message-box__title,
  .el-message-box__content {
    color: var(--message-box-text-color);
  }
}

// 全局弹窗和el-dialog样式修改
div.el-dialog {
  opacity: 1;
  background-color: var(--dialog-bg);
  // 系统设置弹窗
  .el-dialog__header {
    background-color: var(--dialog-header-bg);
    padding: 16px 16px 10px;
    .el-dialog__title {
      font-weight: bold;
      color: var(--dialog-text-color);
    }
    .el-dialog__close {
      color: var(--dialog-text-color);
    }
  }
  .el-dialog__body {
    padding: 6px 16px 0 16px;
    text-align: initial;
  }
  .el-dialog__footer {
    padding: 0 16px 16px;
    font-size: 0;
  }
  .form-dialog-footer {
  }
  .detail-dialog-footer {
    margin-top: 18px;
  }
}

.dialog-scroll .el-dialog__body {
  max-height: 500px;
  overflow: auto;
}

// 全局el-popover样式修改
.el-popover {
  border-color: var(--popover-border-color);
  background-color: var(--popover-bg);
  color: var(--popover-text-color);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--popover-box-shadow);
  .el-popover__title {
    color: var(--popover-text-color);
  }
  &[x-placement^='left'] {
    .popper__arrow,
    .popper__arrow::after {
      border-left-color: var(--popover-border-color);
    }
  }
}

// 全局el-table样式修改
div.el-table {
  background-color: var(--table-bg);
  &::before {
    // height: 0px;
  }
  .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }
  th.el-table__cell {
    background-color: var(--table-th-bg);
    color: var(--table-th-text-color);
    font-size: 16px;
    &.is-leaf {
      // border-bottom: none;
    }
    .cell.highlight {
      color: var(--table-th-highlight-text-color);
    }
  }
  // 过滤样式
  .el-table__column-filter-trigger {
    margin-left: 5px;
    font-weight: bold;
  }
  td.el-table__cell {
    padding: 10px 0;
    color: var(--table-tr-text-color);
    // border-bottom: none;
    .cell {
      line-height: 20px;
    }
  }
  // 非striped行的样式
  tr.el-table__row:not(.el-table__row--striped) {
    background-color: var(--table-tr-bg);
  }
  // striped斑马行的样式
  &.el-table--striped .el-table__body tr.el-table__row--striped {
    background-color: var(--table-tr-striped-bg);
    td.el-table__cell {
      // background-color: transparent;
      background-color: var(--table-tr-striped-bg);
    }
  }
  // 高亮样式
  .el-table__body tr.current-row > td.el-table__cell {
    background-color: transparent;
  }
  // 鼠标移上去样式
  .el-table__body
    tr:not(.el-table__row--striped).hover-row
    > td.el-table__cell {
    background-color: var(--table-tr-bg);
  }
  .el-table__body tr.hover-row.el-table_row--striped > td.el-table__cell {
    // background-color: transparent;
    // background-color: var(--table-tr-bg);
    background-color: var(--table-tr-striped-bg);
  }
  //  有固定列的情况下，鼠标移上去样式
  .el-table__body
    tr.hover-row
    > td.el-table__cell:not(.el-table-fixed-column--right) {
    // background-color: transparent;
  }
  // 没有固定列的情况下
  &.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent;
  }
  .el-table__empty-block {
    background: var(--table-tr-striped-bg);
    .el-table__empty-text {
      color: var(--table-tr-text-color);
    }
  }
  .el-table__body-wrapper {
    @extend .custom-scrollbar; // 继承滚动条样式
  }
  col[name='gutter'] {
    width: $scrollWidth;
  }
  // 固定列的样式
  .el-table__header-wrapper tr th.el-table-fixed-column--right {
    background-color: var(--table-th-bg);
  }
  // .el-table__fixed-right {
  //   height: 100% !important;
  //   right: 0 !important; // 固定列预留给右侧滚动条的位置
  //   background-color: var(--table-tr-striped-bg);
  //   &::before {
  //     background-color: transparent;
  //   }
  // }
  // 有滚动条时才设置
  // &.el-table--scrollable-y .el-table__fixed-right {
  //   right: $scrollWidth !important; // 固定列预留给右侧滚动条的位
  // }
  // 固定列右上角
  // .el-table__fixed-right-patch {
  //   width: $scrollWidth !important;
  //   background-color: var(--table-th-bg);
  //   border-bottom-color: transparent;
  // }
  // 解决固定列最下面余白问题，高度没适应
  // .el-table__fixed-body-wrapper {
  //   height: auto !important;
  //   bottom: $scrollHeight;
  // }
}
.el-table--border {
  .el-table__cell {
    border-right: none;
  }
}
// 表格里面的文本按钮/图标样式
.el-table__cell {
  .el-button.is-text {
    padding: 0px 6px;
    background-color: transparent;
    + .el-button.is-text {
      margin-left: 0px;
    }
    &:hover {
      .svg-icon {
        fill: var(--primary-theme);
      }
    }
    .svg-icon {
      width: 18px;
      height: 18px;
      fill: var(--subtone-theme);
      vertical-align: middle;
    }
    &.is-disabled {
      .svg-icon {
        opacity: 0.5;
      }
    }
    i {
      font-size: 18px;
    }
  }
}
.dy-table__cell {
  .svg-icon {
    vertical-align: middle;
    fill: #888;
  }
  i {
    font-size: 16px;
  }
  .el-dropdown-menu__item:not(.is-disabled):hover {
    color: #5dc590;
    .svg-icon {
      fill: #5dc590;
    }
  }
}
// 特殊表格的按钮样式
.table-column-btn-wrap {
  display: flex;
  align-items: center;
  .el-button.is-text + .el-button.is-text {
    margin-left: 0;
  }
}
.el-table-filter__bottom button:not(.is-disabled):hover {
  color: var(--table-filter-button-text-color);
}
.el-table-filter__list li:first-child {
  display: none;
}

// form表单样式
.el-form-item {
  margin-bottom: 16px;
  .el-form-item__label {
    display: flex;
    align-items: center;
    min-height: var(--common-input);
    line-height: 20px;
    color: var(--form-label-text-color);
  }
  .el-form-item__content {
    line-height: var(--common-input);
    color: var(--form-content-text-color);
  }
}
.el-form--label-top {
  .el-form-item__label {
    line-height: 20px;
    padding: 0;
  }
}

div.el-pagination {
  padding: 0;
  span:not([class*='suffix']) {
    // height: 28px;
    // line-height: 25px;
  }
  .el-select {
    .el-input {
      .el-input__inner {
        // height: 28px;
        // line-height: 28px;
        background-color: var(--pagination-btn-bg);
        border-color: var(--pagination-btn-border-bg);
        color: var(--pagination-text-color);
      }
      .el-select__caret {
        color: #c0c4cc;
      }
    }
  }
  &.is-background {
    .btn-next,
    .btn-next:disabled,
    .btn-prev,
    .btn-prev:disabled,
    .el-pager li {
      background-color: transparent;
      color: var(--pagination-text-color);
    }
    .el-pager {
      li:not(.disabled) {
        &.is-active {
          background-color: var(--pagination-btn-active-bg);
          color: var(--pagination-active-text-color);
        }
        &:not(.is-active):hover {
          color: var(--pagination-hover-text-color);
        }
      }
    }
  }
  .el-pagination__jump {
    display: none !important;
    color: var(--pagination-text-color) !important;
  }
  .el-pagination__total {
    color: var(--pagination-text-color) !important;
  }
}

// el-radio样式修改
.el-radio-group {
  .el-radio-button__inner {
    padding: 8px 15px;
    border-color: var(--radio-border-color);
    &:hover {
      color: var(--radio-hover-text-color);
    }
  }
  .el-radio-button {
    border-color: var(--radio-border-color);
    &:first-child .el-radio-button__inner {
      border-color: var(--radio-border-color);
    }
    &.is-active
      .el-radio-button__original-radio:not(:disabled)
      + .el-radio-button__inner {
      background-color: var(--radio-checked-bg);
      border-color: var(--radio-border-color);
      box-shadow: none;
    }
  }
}

// 单选框
.el-radio .el-radio__label {
  color: var(--radio-text-color);
}
div .el-radio__input.is-checked {
  + .el-radio__label {
    color: var(--radio-hover-text-color);
  }
  .el-radio__inner {
    background: var(--radio-checked-bg);
    border-color: var(--radio-border-color);
  }
}

// 日期时间选择器
div.el-range-editor {
  padding: 0 10px;
  background-color: var(--range-editor-bg);
  border-color: var(--range-editor-border-color);
  border-radius: 0;
  &.el-input__wrapper {
    // height: var(--common-input);
    // line-height: var(--common-input);
  }
  &.is-active {
    box-shadow: 0px 0px 0px 1px var(--range-editor-border-color) inset;
    &:hover {
      box-shadow: 0px 0px 0px 1px var(--range-editor-border-color) inset;
    }
  }
  .el-range-input {
    color: var(--range-editor-text-color);
    background-color: var(--range-editor-bg);
  }
  .el-range__icon {
    line-height: 28px;
  }
  .el-range-separator {
    line-height: 28px;
    color: var(--range-editor-text-color);
  }
}
// 日期时间选择器弹框
.el-date-range-picker,
.el-date-picker {
  .el-picker-panel__body {
    .el-input--small .el-input__inner {
      color: #333;
    }
  }
  .el-picker-panel__footer {
    .el-button:not([disabled='disabled']) {
      &.el-button--default,
      &.el-button--default:hover {
        background: var(--range-picker-btn-color);
        color: var(--range-picker-text-color);
        border-color: var(--range-picker-btn-color);
        &.is-disabled,
        &.is-disabled:hover {
          background-color: var(--range-picker-text-color);
          border-color: #ebeef5;
          color: #c0c4cc;
        }
      }
      &.is-text {
        color: var(--range-picker-btn-color);
      }
    }
  }
}

// Badge 标记
.el-badge {
  .el-badge__content {
    top: 17px;
  }
}

// 重置upload选中文件样式
.el-upload-list__item {
  .el-upload-list__item-name {
    color: var(--upload-list-text-color);
  }
  &:hover {
    background: none;
  }
  &:focus {
    border: none;
  }
}
.el-upload-list .el-upload--picture-card:hover {
  color: var(--upload-list-text-color);
  border-color: var(--upload-hover-border-color);
}

// 步骤条样式重置
.el-step__head.is-success {
  color: var(--step-success-text-color);
  border-color: var(--step-success-border-color);
}
.el-step__title.is-success {
  color: var(--step-success-text-color);
}
.el-step__head.is-process {
  color: var(--step-process-text-color);
  border-color: var(--step-process-border-color);
}
.el-step__title.is-process {
  color: var(--step-process-text-color);
}

// 文字提示
.el-tooltip__popper {
  max-width: 300px;
}

// 计数器样式
.el-input-number {
  line-height: 33px;
  .el-input-number__decrease,
  .el-input-number__increase {
    color: var(--input-number-btn-text-color) !important;
    border: var(--input-number-btn-border-color);
    background-color: var(--input-number-btn-bg);
  }
}

// 多选框
div .el-checkbox {
  .el-checkbox__label {
    color: var(--checkbox-checker-text-color);
  }
  &.is-checked {
    .el-checkbox__label {
      color: var(--checkbox-checker-checked-text-color);
    }
  }
}
div .el-checkbox__input.is-checked .el-checkbox__inner,
div .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--checkbox-checker-bg);
  border-color: var(--checkbox-checker-border-color);
}
div .el-checkbox__inner:hover {
  border-color: var(--checkbox-checker-border-color);
}
// loading加载
.el-loading-mask {
  z-index: 1000;
  .el-loading-spinner {
    i {
      font-size: 30px;
      color: var(--loading-icon-color);
    }
    .el-loading-text {
      margin-top: 10px;
      font-size: 16px;
      color: var(--loading-text-color);
    }
  }
}
// descriptions 描述列表
.el-descriptions {
  .el-descriptions__body {
    color: var(--descriptions-text-color);
    background: var(--descriptions-body-bg);
  }
  .el-descriptions__content.el-descriptions__cell.is-bordered-content {
    color: var(--descriptions-text-color);
    word-break: break-all;
  }
  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
    color: var(--descriptions-text-color);
    background: var(--descriptions-label-bg);
  }
  .is-bordered .el-descriptions-item__cell {
    border: 1px solid var(--descriptions-border-color);
    word-break: keep-all;
  }
}

// tree 树形控件
.el-tree {
  background-color: var(--tree-bg);
  .el-tree-node__content {
    color: var(--tree-text-color);
    &:hover,
    &:focus {
      background-color: var(--tree-node-hover-bg);
    }
    > label.el-checkbox.is-checked + .el-tree-node__label {
      color: var(--tree-active-text-color);
    }
  }
}
